import React, { Component, Fragment } from 'react'
import './App.css'
import 'default-passive-events'
import { byteFroamt } from './common.js'
import { Card, Col, Row, Statistic } from 'antd'
import { GlobalOutlined } from '@ant-design/icons'
import { TinyLine } from '@ant-design/charts'
import { FormattedMessage } from 'react-intl'

export default class NetWorkState extends Component {

    nArray = 30
    constructor(props) {
        super(props)

        this.state = {
            lasttime: 0,
            lastdata: {}
        }

        //初始化表格数据
        for (let item in props.net) {
            const keyname = item
            const itemin = "netdev_" + item + "_in"
            const itemout = "netdev_" + item + "_out"

            this.state.lastdata[keyname] = {
                in: 0,
                out: 0,
            }
            this.state[itemin] = new Array(this.nArray).fill(0)
            this.state[itemout] = new Array(this.nArray).fill(0)
        }
    }

    static getDerivedStateFromProps(props, state) {
        if (state.lasttime === props.time) return null
        let { lastdata } = state
        let obj = {
            "lasttime": props.time
        }

        //获取网卡信息并更新state
        for (let item in props.net) {
            const itemin = "netdev_" + item + "_in"
            const itemout = "netdev_" + item + "_out"
            let datain = state[itemin]
            let dataout = state[itemout]
            datain.splice(0, 1)
            dataout.splice(0, 1)

            if (state.lasttime === 0) {
                datain.push(0)
                dataout.push(0)
            } else {
                datain.push(props.net[item]["Receive"]["bytes"] - state.lastdata[item]["in"])
                dataout.push(props.net[item]["Transmit"]["bytes"] - state.lastdata[item]["out"])
            }
            lastdata[item]["in"] = props.net[item]["Receive"]["bytes"]
            lastdata[item]["out"] = props.net[item]["Transmit"]["bytes"]

            //这里必须采用深拷贝的方式，否则state会更新失败
            obj[itemin] = [...datain]
            obj[itemout] = [...dataout]
        }

        obj["lastdata"] = { ...lastdata }
        return { ...obj }
    }

    render() {
        if (this.state.lasttime === 0) return (<div></div>)

        return (
            <Fragment>
                <Card.Meta className="stateCard"
                    avatar={<GlobalOutlined />}
                    title={<FormattedMessage id="Network" />}
                />
                {
                    Object.keys(this.props.net).map((item, i) => (
                        <Fragment key={"net" + item + i}>

                            <Row>
                                <Col xs={24} sm={24} md={24} lg={12}>

                                    <Card
                                        className="stateCard"
                                        title={
                                            <FormattedMessage id="DownloadState">
                                                {(name) => (
                                                    item + " " + [name]
                                                )}
                                            </FormattedMessage>
                                        }
                                    >
                                        <TinyLine
                                            height={200}
                                            smooth="true"
                                            data={this.state["netdev_" + item + "_in"]}
                                        />

                                        <Row span={16}>
                                            <Col span={12}>
                                                <Statistic
                                                    title={<FormattedMessage id="TotalDownload" />}
                                                    value={byteFroamt(this.state.lastdata[item]["in"])}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <Statistic
                                                    title={<FormattedMessage id="DownloadSpeed" />}
                                                    value={byteFroamt(this.state["netdev_" + item + "_in"][this.nArray - 1])}
                                                />
                                            </Col>
                                        </Row>

                                    </Card>
                                </Col>

                                <Col xs={24} sm={24} md={24} lg={12}>

                                    <Card
                                        className="stateCard"
                                        title={
                                            <FormattedMessage id="UploadState">
                                                {(name) => (
                                                    item + " " + [name]
                                                )}
                                            </FormattedMessage>
                                        }
                                    >
                                        <TinyLine
                                            height={200}
                                            smooth="true"
                                            data={this.state["netdev_" + item + "_out"]}
                                        />

                                        <Row span={16}>
                                            <Col span={12}>
                                                <Statistic
                                                    title={<FormattedMessage id="TotalUpload" />}
                                                    value={byteFroamt(this.state.lastdata[item]["out"])}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <Statistic
                                                    title={<FormattedMessage id="UploadSpeed" />}
                                                    value={byteFroamt(this.state["netdev_" + item + "_out"][this.nArray - 1])}
                                                />
                                            </Col>
                                        </Row>

                                    </Card>
                                </Col>

                            </Row>
                        </Fragment>
                    ))
                }

            </Fragment>
        )
    }
}
